<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        input {
            outline-style: none;
            border: none;
        }

        ul,
        li {
            list-style-type: none;
        }

        a {
            color: black;
            text-decoration: none;
        }

        #app {
            width: 100%;
            display: flex;
            height: 100vh;
            justify-content: space-between;
        }

        #app .bj_img {
            flex: 0 0 25%;
            background: url(https://cdn.web-global.fds.api.mi-img.com/mcfe--mi-account/static/static/media/banner.92c693b4..jpg);

            background-size: 100%;
            background-repeat: no-repeat;
            background-position: 0px -60px;
            overflow: hidden;
        }

        #app .mi-layout {

            flex: 0 0 74%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
        }

        #app .mi-layout .mi-layout__title {
            width: 100%;
            flex: 0 0 20%;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        #app .mi-layout .mi-layout__title .mi-layout__logo-wrap {
            flex: 0 0 300Px;
            height: 100%;
            position: relative;
        }

        #app .mi-layout .mi-layout__title .mi-layout__logo-wrap div {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        #app .mi-layout .mi-layout__title .mi-layout__logo-wrap h2 {
            position: absolute;
            top: 50%;
            left: 60px;
            transform: translateY(-50%);
            font-size: 40px;
            color: #565353;
        }

        #app .mi-layout .mi-layout__title .mi-nav {
            flex: 0 0 500px;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

        }

        #app .mi-layout .mi-layout__title .mi-nav a {
            display: inline-block;
            height: 40px;
            line-height: 40px;
            text-align: center;
            width: 100px;
            color: #ccc;
        }

        #app .mi-layout .mi-layout__title .mi-nav a:hover {
            color: rgb(241, 177, 73);
        }

        #app .mi-layout .mi-layout__title .mi-nav .mi-nav__divider {
            height: 14px;
            border-right: 1px solid #988b8b;
        }

        #app .mi-layout .mi-layout__title .mi-nav ul .items ul {
            display: none;
        }

        #app .mi-layout .mi-layout__title .mi-nav ul li {
            width: 100px;
        }

        #app .mi-layout .mi-layout__title .mi-nav ul .items:hover ul {
            display: block;
        }

        #app .mi-layout .mi-layout__container {
            flex: 0 0 60%;
            width: 100%;
            position: relative;
        }

        #app .mi-layout .mi-layout__container .mi-layout-card {
            width: 400px;
            color: #d0d0d0;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid #d0d0d0;
            box-shadow: 10px 20px 2px 0 #fbfbfb;
            text-align: center;
        }

        #app .mi-layout .mi-layout__container .mi-layout-card .cardTab a {
            width: 64px;
            color: #bbbbbb;
            display: inline-block;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 20px;
            border-bottom: 7px solid #ff5c00;
        }

        #app .mi-layout .mi-layout__container .mi-layout-card .cardTab a:nth-child(1) {
            color: black;
        }

        #app .mi-layout .mi-layout__container .login {
            font-size: 14px;
            height: 400px;
        }

        #app .mi-layout .mi-layout__container .login div {
            margin-bottom: 10px;
        }

        #app .mi-layout .mi-layout__container .login div input {
            border: none;
            width: 300px;
            height: 40px;
            padding: 5px;
            background-color: #f9f9f9;
        }

        #app .mi-layout .mi-layout__container .registe {
            width: 100%;
            font-size: 14px;
            height: 400px;
            display: none;

        }

        #app .mi-layout .mi-layout__container .registe div span {
            width: 100px;
            height: 60px;
            display: inline-block;
            line-height: 60px;
            text-align: center;
            background-color: #f9f9f9;
        }

        #app .mi-layout .mi-copyright {
            flex: 0 0 20%;
        }
    </style>
</head>

<body>
    <div id="app"></div>
    <template id="root">
        <Back-Img></Back-Img>
        <Text-Content :users="users" :adduser="addUser"></Text-Content>
    </template>

    <template id="backImg">
        <div class="bj_img"></div>
    </template>

    <template id="textContent">
        <div class="mi-layout">
            <div class="mi-layout__title">
                <div class="mi-layout__logo-wrap">
                    <div>
                        <img src="./img/miLogo.png" alt="">
                    </div>
                    <h2>小米账号</h2>
                </div>

                <div class="mi-nav">
                    <a href="javascript:;">用户协议</a>
                    <a href="javascript:;">隐私协议</a>
                    <a href="javascript:;">帮助中心</a>
                    <div class="mi-nav__divider"></div>
                    <div class="mi-nav__item">
                        <div class="mi-language-picker">
                            <ul>
                                <li class="items">
                                    <a href="javascript;:">中文(简体)</a>
                                    <ul>
                                        <li class="item"><a href="javascript;:">中文(繁体)</a></li>
                                        <li class="item"><a href="javascript;:">English</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mi-layout__container">
                <div class="mi-layout-card">
                    <div class="cardTab">
                        <a href="javascript:;" id="card">登录</a>
                        <a href="javascript:;" id="card">注册</a>
                    </div>
                    <!-- 登录表单 -->
                    <form action="javascript:;" class="login">
                        <div>
                            <input type="text" placeholder="邮箱/手机号码/小米ID" v-model.lazy="username" id="username">
                            <br>
                            <span style="color: red; display: none;" id="tishi">登录账号不能为空</span>
                        </div>
                        <div>
                            <input type="password" placeholder="密码" v-model.lazy="password" id="password">
                            <br>
                            <span style="color: red;display: none;" id="tishi">密码不能为空</span>
                        </div>

                        <input type="checkbox" v-model="statis">已阅读并同意小米账号
                        <a href="https://static.account.xiaomi.com/html/agreement/user/zh_CN.html"
                            target="_blank">用户协议</a>和
                        <a href="https://privacy.mi.com/miaccount/zh_CN/" target="_blank">隐私政策</a>

                        <input type="submit" value="登录"
                            style="width: 300px; background-color: #ffbe99; height: 40px; color: #fbfbfb; border: none;"
                            @click="login">
                    </form>

                    <!-- 注册 -->
                    <form action="javascript:;" class="registe">
                        <div style="margin-top: 10px;">
                            <select style="width: 300px;height: 60px; background-color: #f9f9f9; border: none;">
                                <option value="cn">中国</option>
                            </select>
                        </div>

                        <div style="margin-top: 10px;">
                            <input type="number" placeholder="手机号"
                                style="width: 300px;height: 60px;background-color: #f9f9f9;" v-model="phone">
                        </div>

                        <div style="margin-top: 10px;">
                            <input type="text" placeholder="请输入验证码"
                                style="width: 200px;height: 60px; background-color: #f9f9f9;" v-model="codevalue">
                            <span @click="createCode()"><a href="javascript:;">获取验证码</a></span>
                        </div>
                        <span class="textCode">XXXX</span>
                        <br>
                        <input type="checkbox" v-model="statis">已阅读并同意小米账号
                        <a href="https://static.account.xiaomi.com/html/agreement/user/zh_CN.html"
                            target="_blank">用户协议</a>和
                        <a href="https://privacy.mi.com/miaccount/zh_CN/" target="_blank">隐私政策</a>

                        <input type="submit" value="注册"
                            style="width: 300px; background-color: #ffbe99; height: 40px; color: #fbfbfb; border: none;"
                            @click="registe()">

                    </form>
                </div>

            </div>
            <div class="mi-copyright"></div>
        </div>
    </template>
    <script>
        const BackImg = {
            template: '#backImg',
        }
        const TextContent = {
            template: "#textContent",
            data() {
                return {
                    codevalue: "",
                    username: "",
                    password: "",
                    phone: "",
                    statis: false
                }
            },
            props: ["users", "adduser"],
            methods: {
                login() {
                    if (this.username == '' || this.password == '') {
                        return false
                    }

                    for (let i = 0; i < this.users.length; i++) {
                        if (this.users[i].username == this.username && this.users[i].password == this.password && this.statis) {
                            alert("登录成功")
                            this.username = ""
                            this.password = ""
                            return true
                        } else {
                            console.log("登录失败")
                            return false
                        }
                    }

                },
                registe() {
                    if (this.phone == '') {
                        return false
                    } else {
                        let a = []
                        for (let i = 0; i < this.users.length; i++) {
                            if (parseInt(this.users[i].username) == this.phone) {
                                a.push(this.users[i].username)
                                console.log('该手机号已被注册', this.users[i].username, this.phone)
                                return false
                            }
                        }
                        let textCode = document.querySelector(".textCode")
                        if (a.length == 0 && this.statis && this.codevalue == textCode.innerHTML) {
                            let user = {
                                id: new Date().getTime(),
                                username: this.phone,
                                password: "123456"
                            }
                            this.adduser(user)
                        }
                    }
                },
                createCode() {
                    
                    if (this.phone) {
                        let code = "";
                        let codeLength = 4;//验证码的长度  
                        let textCode = document.querySelector(".textCode");
                        let random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');//随机数  
                        for (let i = 0; i < codeLength; i++) {//循环操作  
                            let index = Math.floor(Math.random() * 36);//取得随机数的索引（0~35）  
                            code += random[index];//根据索引取得随机数加到code上  
                        }
                        textCode.innerHTML = code;//把code值赋给验证码  
                    } else {
                        alert("请输入手机号")
                    }

                }

            },
            mounted() {
                const username = document.querySelector('#username')
                const password = document.querySelector("#password")
                username.onblur = function () {
                    if (username.value.length == 0) {
                        document.querySelectorAll("#tishi")[0].style.display = 'block'
                    } else {
                        document.querySelectorAll("#tishi")[0].style.display = 'none'
                    }
                }
                password.onblur = function () {
                    if (password.value.length == 0) {
                        document.querySelectorAll("#tishi")[1].style.display = 'block'
                    } else {
                        document.querySelectorAll("#tishi")[1].style.display = 'none'
                    }
                }
            }
        }
        const app = Vue.createApp({
            template: '#root',
            data() {
                return {
                    users: [
                        { id: 1, username: 13527337114, password: '123456' },
                        { id: 2, username: 17784323445, password: 'xi1408' },
                        { id: 3, username: 13883422243, password: 'xiuo08' },
                    ]
                }
            },
            methods: {
                addUser(user) {
                    this.users.push(user)
                    console.log(this.users)
                    alert("注册成功")
                }
            },
            components: {
                BackImg,
                TextContent
            },
            mounted() {
                const cards = document.querySelectorAll("#card")
                const forms = document.querySelectorAll('form')
                for (let i = 0; i < cards.length; i++) {
                    cards[i].onclick = function () {
                        cards.forEach(e => {
                            e.style.color = "#bbbbbb"
                        })
                        forms.forEach(e => {
                            e.style.display = 'none'
                        })
                        cards[i].style.color = 'black'
                        forms[i].style.display = 'block'
                    }
                }


            },
        }).mount('#app')
    </script>
</body>

</html>